我們昨天 Day 04 的時候在 App.js 檔案中有看到以下的程式碼：

不過，為什麼能夠在一個 JavaScript 函式中撰寫看起來像是 HTML 標籤的東西呢？今天就要帶大家來一探究竟這個語法：JSX 語法。

JSX 語法

一個 JavaScript 的語法擴充，並且支援所有 JavaScript 的功能。

在詳細說明 JSX 語法之前，要先讓大家知道 React.js 其實是使用 JavaScript 來產生出 HTML 的，所以其實在函式內部中我們是可以使用原生 JavaScript 來做撰寫。不過採用原生的 JavaScript 的話一樣會隨著專案的大小而產生出程式碼過於複雜和冗長的狀況，所以 React.js 的官方文件中也推薦我們使用 JSX 語法來做撰寫喔！

為什麼要使用 JSX 語法？

剛剛上面有提及到，如果使用原生的 JavaScript 寫法的話是很容易讓較龐大的專案產生更複雜的程式碼的。所以使用 JSX 語法就可以將我們的 UI 畫面和程式邏輯撰寫在一起（也就是結合 HTML 標籤和 JavaScript 邏輯），減少程式碼的複雜程度和維護時的便利性。
不過這邊要特別注意，因為 JSX 語法是特殊的語法擴充，所以一般的瀏覽器是沒辦法辨識 JSX 語法的。這時候需要像是 Babel 等類似工具來轉譯成瀏覽器可以理解的 JavaScript 。

備註：使用 create-react-app 創建專案時，裡面已經有 Babel 等轉譯的相關設定了，所以可以直接使用 JSX 語法。

如何撰寫？

這邊先帶大家認識幾個 JSX 語法的特色和規則：

1. HTML 可以當作參數

const greeting = <h1>Hello, world!</h1>;

ReactDOM.render(
    greeting,
    document.getElementById('root')
);

上面的範例就是最簡易的 JSX 語法，我們將一個參數設定成 HTML 的標籤，並在 ReactDOM 中去引用該參數。這樣瀏覽器上就可以如下圖般確實地顯示出該段 HTML 標籤內容。

2. JSX 語法中的保留字

function PersonOne() {
  return (
    <div className="person">
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </div>
  );
}

上面的範例中，我們在 div 標籤中使用 className 來取代原本的 class 屬性，那是因為 class 這個單字是 JSX 語法的保留字（ Preserve Word ）所以要使用 className 來替代。

3. 在 JSX 中撰寫 JavaScript Expression

function formatName(user) {
  return user.firstName+ ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

上面的案例大家可以發現，在 JSX 也是可以撰寫 JavaScript 的。不過要特別記得，如果有撰寫 JavaScript 的話就必須使用 {} 包起來。

4. CSS 中的屬性要使用駝峰式命名（ camelCase ）

  const style = {
        fontSize: '10px',
        marginBottom:'5%',
  };
    
  <p style={style}>Hello World!</p>

除了 CSS 中的屬性要使用駝峰式命名之外，在撰寫 style 的時候也必須使用 JavaScript 的物件格式。

5. 至少需要一個根節點

function PersonOne() {
  return (
    <div>
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </div>
  );
}

在上面範例中，我們提供了 PersonOne() 這個函式一個 div 標籤的根節點，這樣的寫法在 JSX 當中才不會出現錯誤。
但是在 React.js 的 v16.2.0 開始提供了 Fragment 的方法來解決必須要有一個根節點的問題， React.js 提供這樣的方法是想要減少不必要的節點，因此只要使用 Fragment 的話便可以在 JSX 語法中寫上多個標籤。

import { Fragment } from "react";

function PersonOne() {
  return (
    <Fragment>
      <h1>Bill</h1>
      <p>Your Age: 26</p>
    </Fragment>
  );
}

以上就是關於 JSX 語法的基本介紹！
另外有任何問題一樣都非常非常歡迎提出和指教～
那我們下篇見ʘ‿ʘ